<template>
  <!--我的审批-公共审批-组件 -->
  <section class="component case-approval-common">
    <el-form :model="applyModel" :rules="rules" label-width="90px" ref="form">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="rowType === 'TAG_ACCOUNT' ? '账号ID' : '客户ID'">
            <el-input :value="rowType === 'TAG_ACCOUNT' ? applyModel.caseNumber : applyModel.personalId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户姓名">
            <el-input v-model.trim="applyModel.personalName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批状态" class="status">
            <el-select v-model="applyModel.applyStatus" disabled>
              <el-option
                :key="index"
                :label="item.name"
                :value="item.code"
                v-for="(item, index) in $dict.getDictData('ApplyStatus')"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人代号" class="applicant">
            <el-input v-model.trim="applyModel.agentCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="新增标签">
        <el-input :value="applyModel.addTagNames" disabled></el-input>
      </el-form-item>
      <el-form-item label="释放标签">
        <el-input :value="applyModel.delTagNames" disabled></el-input>
      </el-form-item>
      <el-form-item label="注记">
        <el-input :value="applyModel.note" type="textarea" disabled :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="审批意见" prop="approvalOpinion" v-if="rowData.applyStatus==='PENDING'  && rowData.checkUserLinkedList.includes(userId) && type === '审批'">
        <el-input :disabled="applyModel.applyStatus!=='PENDING'" type="textarea" v-model.trim="applyModel.approvalOpinion" clearable :maxlength="300" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="审批历史">
        <data-box :data="recordHistory" class="data-box-padding">
          <template slot="columns">
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="审批人" prop="approvalRealName" show-overflow-tooltip></el-table-column>
            <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(5)" label="审批时间" prop="approvalTime" show-overflow-tooltip></el-table-column>
            <el-table-column :formatter="(row) => $filter.dictConvert(row.applyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(3)" label="审批结果" prop="applyStatus" show-overflow-tooltip></el-table-column>
            <el-table-column :min-width="$helper.getColumnWidth(3)" label="审批意见" prop="approvalOpinion" show-overflow-tooltip></el-table-column>
          </template>
        </data-box>
      </el-form-item>
    </el-form>
    <div class="confirm-button" v-if="applyModel.applyStatus==='PENDING'  && applyModel.checkUserLinkedList.includes(userId) && type === '审批'">
      <el-button @click="commit('REJECT')">拒绝</el-button>
      <el-button @click="commit('PASS')">同意</el-button>
    </div>
    <div class="confirm-button" v-else>
      <el-button @click="close">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Dependencies } from "~/core/decorator"
import { Emit, Prop, Watch } from "vue-property-decorator"
import { State, Getter, Action, namespace } from "vuex-class"
import { CaseApplyRecordService } from "~/services/domain-service/case-apply-record.service"
import { Form } from 'element-ui'

@Component({
  components: {}
}) 
export default class CaseApprovalCommon extends Vue {
  public $refs: { form: Form }
  @Dependencies(CaseApplyRecordService) private caseApplyRecordService: CaseApplyRecordService
  @State private userData

  private rules: any = {
    applyStatus: [{ required: true, message: "请选择审批状态" }],
    approvalOpinion: [{ required: true, message: "请输入审批意见" }]
  }
  private applyModel: any = {
    applyStatus: "PASS",
    approvalOpinion: "",
    id: ""
  }
  private perDueDate

  @Prop({ required: true }) private type: string
  @Prop({ required: true }) private rowType: string
  @Prop({ required: true }) private recordHistory: any
  @Prop({ required: true }) private rowData: any
  @Prop({ required: true }) private rowId: string
  @Prop({ required: true }) private rowName: string
  @Prop({ type: String }) private nameType

  @Watch("rowData", { immediate: true }) private idChange(value) {
    this.applyModel = { ...this.rowData }
  }
  @Emit("close") private close() {
    this.reset()
  }

  private mounted() {
    this.applyModel = { ...this.rowData }
  }

  private get userId() {
    return this.userData.id
  }

  private reset() {
    this.$refs.form.resetFields()
  }

  private async commit(applyStatus) {
    const result = await this.$refs.form.validate().then(() => true).catch(() => false)
    if (!result) return
    this.applyModel.applyStatus = applyStatus
    this.applyModel.id = this.rowId.split(',')
    this.caseApplyRecordService.dealApply(this.applyModel).subscribe(
      data => {
        this.$message.success("操作成功")
        this.close()
      },
      err => {
        this.applyModel.id = this.rowData.id
        this.close()
      }
    )
  }

  private annexCheckClick(row) { // 附件查看
    window.open(row.url, row.fileName)
  }
}
</script>

<style lang="less" scoped>
.data-box-padding{
  padding: 0 !important;
}
/*deep*/.form-name{
  display: inline-block;
  min-width: 40%;
}
/*deep*/.el-select, /*deep*/.el-input{
  width: 100% !important;
}
/*deep*/.el-select-dropdown{
  width: 100% !important;
}
.month-input{
  width: 50px !important;
  margin-left: 30px;
  margin-right: 10px;
}
</style>
<style lang="less">
.component.case-approval-common {
  .data-box > * {
    padding: 0 !important;
  }
}
</style>
